import { globalStyle, style } from '@vanilla-extract/css';
import { darkColor } from '../../theme/colors/colorDark.css';
import { lightColor } from '../../theme/colors/colorLight.css';
import { brighten, fallBackGlobalStyle, modifyHSLColorLightness } from '../../theme/tools';
import { vars } from '../../theme/vars.css';
import { actionStyle } from '../action/action.css';

export const popMenuStyle = style({
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	outline: 'none',
	userSelect: 'none',
	padding: '0.4em',
});

globalStyle(`${popMenuStyle}>div`, {
	display: 'flex',
	alignItems: 'center',
	padding: '0.6em 0.6em',
	cursor: 'default',
	outline: 'none',
	borderRadius: '0.3em',
});

globalStyle(`${popMenuStyle}>div:focus,${popMenuStyle}>div.active`, {
	backgroundColor: vars.color.selection,
});

globalStyle(`${actionStyle} ${popMenuStyle}>div`, {
	padding: '0.8em 0.5em',
});

globalStyle(`${popMenuStyle}>div.line`, {
	display: 'block',
	padding: 0,
	margin: '0.4em 0',
	marginLeft: '-0.4em',
	marginRight: '-0.4em',
	borderTop: `1px solid ${brighten(vars.color.border, 0.15)}`,
	backgroundColor: 'none',
	pointerEvents: 'none',
});

fallBackGlobalStyle(
	`${popMenuStyle}>div.line`,
	{
		borderTop: `1px solid ${modifyHSLColorLightness(lightColor.color.border, 0.15)}`,
	},
	{
		borderTop: `1px solid ${modifyHSLColorLightness(darkColor.color.border, -0.15)}`,
	},
);

globalStyle(`${popMenuStyle}>div.caption`, {
	display: 'block',
	backgroundColor: 'none',
	pointerEvents: 'none',
	color: vars.color.secondaryText,
	fontSize: '1.1em',
	fontWeight: 'bold',
});

globalStyle(`${popMenuStyle}>div.disabled`, {
	color: vars.color.disabledText,
});

globalStyle(`${popMenuStyle}>div>span.icon`, {
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	width: '1em',
	height: '1em',
	marginRight: '0.7em',
	fontSize: '1.2em',
});

globalStyle(`${popMenuStyle}>div>span.text`, {
	flex: 1,
});

globalStyle(`${popMenuStyle}>div>span.arrow`, {
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	width: '1.4em',
	marginLeft: '1em',
	marginRight: '-0.5em',
});

globalStyle(`${popMenuStyle}>div.disabled>span>svg`, {
	fill: vars.color.disabledText,
});
